<template>
  <view class="booking-page">
    <view class="fixed-tab">
      <view
        class="booking-page-tabs"
        :class="{ 'scroll-after': isScrollTop100 }"
      >
        <tabs
          :list="tabs"
          keyName="dictLabel"
          lineWidth="0"
          :activeStyle="activeStyle"
          :current="activeCurrent"
          :inactiveStyle="inactiveStyle"
          :itemStyle="itemStyle"
          :isCenterExt="true"
          @click="changeTab"
        >
          <view slot="right" class="slot-right">
            <view class="shadow"></view>
            <view
              :class="['tab-slot-img', `tab-slot-img-${activeImgIndex}`]"
            ></view>
          </view>
        </tabs>
      </view>
    </view>

    <view
      class="cards"
      :class="{ 'scroll-after': isScrollTop100 }"
      v-if="list && list.length"
    >
      <view
        class="card"
        v-for="(item, index) in list"
        :key="index"
        @click="
          toURL('/page_index/booking-detail/index', { id: item.ticOtherBaseId })
        "
      >
        <image
          style="
            width: 100%;
            height: 320rpx;
            border-radius: 16rpx;
            display: block;
          "
          :src="img_api + item.attaPath"
        ></image>
        <view class="info">
          <view class="title u-line-1">
            {{ item.name }}
            <!--            <block v-if="item.addressDetails"-->
            <!--              >（{{ item.addressDetails }}）</block-->
            <!--            >-->
          </view>
          <view class="bottom" v-if="item.timeList.length">
            <view class="left">
              可订时段
              <view class="times">
                <block v-for="(time, idx) in item.timeList" :key="time">
                  <view v-if="idx < 4" class="time">{{ time }}</view>
                </block>
                <view class="time more" v-if="item.timeList.length > 4"
                  >...
                </view>
              </view>
            </view>
            <view class="icon-adr" v-if="false">
              <image
                class="adr-img"
                src="https://ltjt.sjzballsportpark.com/statics/tyc/static/home/img7.png"
              ></image>
              <view>1.2公里</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <no-data
      class="booking-no-data"
      v-if="list && list.length === 0"
      text="暂无此类球场推荐"
    ></no-data>
  </view>
</template>

<script>
import { getBookingList, getBookingType } from "@/config/api";
import noData from "@/components/noData.vue";
import { aBallParkImageMap } from "@/utils/constant";
import tabs from "@/components/tabs/tabs.vue";

export default {
  components: {
    noData,
    tabs,
  },
  data() {
    return {
      tabs: [],
      scrollTop: 0,
      list: null,
      current: 1,
      total: 0,
      loadAll: false, // 已加载全部
      activeTab: "",
      keyId: 0,
      activeStyle: {
        color: "#1a1a1a",
        fontWeight: "bold",
        fontSize: "40rpx",
      },
      inactiveStyle: {
        color: "#4d4d4d",
        fontSize: "32rpx",
      },
      itemStyle: {
        paddingLeft: "20rpx",
        paddingRight: "20rpx",
        height: "56rpx",
      },
    };
  },
  watch: {
    "urlParams.dictValue"(val) {
      if (val) {
        console.log(val, "val@@@@@@@@@@@@@@@@@@@@@@@@@@@@");
        this.activeTab = val;
        this.current = 1;
        this._getList();
      }
    },
  },
  computed: {
    isScrollTop100() {
      return this.scrollTop > 100;
    },
    activeCurrent() {
      const index = this.tabs.findIndex(
        (item) => item.dictValue === this.activeTab
      );
      return index || 0;
    },
    activeImgIndex() {
      const data = this.tabs.find((item) => item.dictValue === this.activeTab);
      return data?.imgIndex || "";
    },
  },
  async onLoad() {
    const { data = [] } = await getBookingType();
    data.forEach((item) => {
      item.imgIndex = aBallParkImageMap[item.dictLabel] || "";
    });
    const { dictValue } = this.urlParams;
    this.activeTab = dictValue || data[0].dictValue;
    this.tabs = data;
    this._getList();
  },
  methods: {
    changeTab(e) {
      this.activeTab = e.dictValue;
      this.current = 1;
      uni.showLoading({
        title: "加载中",
      });
      this._getList();
    },
    _getList() {
      getBookingList({
        otherBaseType: 3,
        otherBaseVenuesType: this.activeTab,
        pageNum: this.current,
        pageSize: 10,
      })
        .then((res) => {
          if (res.code === 200) {
            this.total = res.total;
            this.list =
              this.current === 1 ? res.rows : this.list.concat(res.rows);
            this.keyId++;
          } else {
            this.list = [];
          }
          this.list.forEach((item) => {
            item.timeList = item.timeList || [];
          });
          uni.pageScrollTo({
            scrollTop: 0,
            duration: 0,
          });
          uni.hideLoading();
        })
        .catch((err) => console.log("错误了", err));
    },
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
    // uni.$u.debounce(() => {
    //
    // }, 100);
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.list?.length < this.total) {
      this.current = this.current + 1;
      this._getList();
    } else {
      this.loadAll = true;
    }
  },
};
</script>

<style lang="scss" scoped>
.booking-page {
  min-height: 100vh;
  background-color: #fcfcfb;

  .fixed-tab {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    //height: 154rpx;
    z-index: 14;
    background: #fff;
  }

  .booking-page-tabs::v-deep {
    .u-tabs__wrapper__nav__item {
      &:first-of-type {
        padding-left: 32rpx !important;
      }
    }

    //.u-tabs__wrapper {
    //  align-items: flex-start !important;
    //}
    //
    //.u-tabs__wrapper__scroll-view-wrapper {
    //  margin-top: 58rpx;
    //}
  }

  .slot-right {
    position: relative;
    margin-right: 32rpx;
  }

  .shadow {
    position: absolute;
    top: 58rpx;
    left: -90rpx;
    width: 100rpx;
    height: 56rpx;
    background: linear-gradient(
      -90deg,
      #ffffff 0%,
      #ffffff 13%,
      rgba(255, 255, 255, 0) 100%
    );
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
    pointer-events: none;
  }

  .tab-slot-img {
    display: block;
    width: 240rpx;
    height: 154rpx;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100%;

    &-0 {
      background-image: url("https://ltjt.sjzballsportpark.com/statics/tyc/static/booking/img0.png");
    }

    &-1 {
      background-image: url("https://ltjt.sjzballsportpark.com/statics/tyc/static/booking/img1.png");
    }

    &-2 {
      background-image: url("https://ltjt.sjzballsportpark.com/statics/tyc/static/booking/img2.png");
    }

    &-3 {
      background-image: url("https://ltjt.sjzballsportpark.com/statics/tyc/static/booking/img3.png");
    }

    &-4 {
      background-image: url("https://ltjt.sjzballsportpark.com/statics/tyc/static/booking/img4.png");
    }
  }

  .booking-page-tabs.scroll-after {
    padding-bottom: 14rpx;
    padding-top: 14rpx;

    .u-tabs__wrapper {
      align-items: center !important;
    }

    .u-tabs__wrapper__scroll-view-wrapper {
      margin-top: 0;
    }

    .shadow {
      top: 10rpx;
      left: -100rpx;
    }

    .tab-slot-img {
      width: 64rpx;
      height: 64rpx;
    }
  }

  .cards {
    padding: 154rpx 32rpx 100rpx;

    .card {
      position: relative;
      width: 686rpx;
      height: 320rpx;
      border-radius: 16rpx;
      margin-bottom: 24rpx;
      box-shadow: 0rpx 2rpx 6rpx -2rpx rgba(85, 68, 59, 0.3),
        0rpx 4rpx 10rpx -2rpx rgba(115, 90, 70, 0.25);

      &:before {
        display: block;
        top: 0;
        left: 0;
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 1;
        border-radius: 16rpx;
      }

      .info {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 56rpx 24rpx 20rpx;
        z-index: 2;
        width: 100%;
        border-radius: 16rpx;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.6) 100%
        );

        .title {
          font-size: 28rpx;
          font-weight: 500;
          color: #ffffff;
          line-height: 40rpx;
          text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
        }

        .bottom {
          margin-top: 12rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .left {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.8);
            line-height: 32rpx;

            .times {
              display: flex;
              align-items: center;
              margin-left: 16rpx;

              .time {
                width: 66rpx;
                height: 32rpx;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 4rpx 4rpx 4rpx 4rpx;
                font-size: 24rpx;
                color: #ffffff;
                line-height: 32rpx;
                text-align: center;
                margin-right: 6rpx;

                &.more {
                  width: 36rpx;
                }
              }
            }
          }

          .icon-adr {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.8);
            line-height: 32rpx;

            image {
              display: block;
              width: 24rpx;
              height: 24rpx;
              margin-right: 8rpx;
            }
          }
        }
      }
    }
  }

  .booking-no-data::v-deep {
    .noData {
      padding-top: 154rpx;
      margin: 0 32rpx;
      min-height: 640rpx;
      background: #f6f4f3;
      border-radius: 16rpx;
    }
  }
}
</style>
